<template>
    <div>
        <div v-show="isShowA">
            <div class="titel"><h1>全部订单</h1></div>
            <div class="msg">
                <el-table :data="ordersAdmData" stripe style="width: 100%"
                    ><el-table-column
                        prop="_id"
                        label="单号"
                        align="center"
                        width="250px"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="time"
                        label="下单时间"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="state"
                        label="订单状态"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="insuresId.productsName"
                        label="所属产品"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="usersId.account"
                        label="所属用户"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column label="查看详情" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="info"
                                size="mini"
                                @click="ordersDetailsBtn(scope.row)"
                                >详情</el-button
                            >
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                round
                                size="mini"
                                @click="modifyOrdersBtn(scope.row)"
                                >修改</el-button
                            >
                            <el-button
                                type="success"
                                round
                                size="mini"
                                @click="deleteOrdersBtn(scope.row._id)"
                                >退保</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <div v-show="isShowB">
            <div class="titel"><h1>修改订单</h1></div>
            <div class="add">
                <el-form label-width="80px">
                    <el-form-item label="所属产品:">
                        <el-select
                            v-model="allorders.insuresId._id"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in insuresInfo"
                                :key="item._id"
                                :label="item.productsName"
                                :value="item._id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属用户:">
                        <el-select
                            v-model="allorders.usersId._id"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in usersData"
                                :key="item._id"
                                :label="item.account"
                                :value="item._id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单状态:">
                        <el-input v-model="allorders.state"></el-input>
                    </el-form-item>
                    <el-form-item label="下单时间:">
                        <el-input
                            type="date"
                            placeholder="选择日期"
                            style="width: 100%"
                            v-model="allorders.time"
                        ></el-input>
                    </el-form-item>
                    <el-button type="success" @click="lastStepOrders"
                        >上一步</el-button
                    >
                    <el-button type="success" @click="alterOrders(allorders)"
                        >修改</el-button
                    >
                </el-form>
            </div>
        </div>

        <div v-show="isShowC">
            <div class="titel"><h1>详情</h1></div>
            <div class="add">
                <el-form label-width="80px">
                    <el-form-item label="所属产品:">
                        <el-input
                            v-model="allorders.insuresId.productsName"
                            disabled
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="所属用户:">
                        <el-input v-model="allorders.usersId.account" disabled>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="订单状态:">
                        <el-input v-model="allorders.state" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="下单时间:">
                        <el-input v-model="allorders.time" disabled></el-input>
                    </el-form-item>
                    <el-button type="success" @click="lastDetailsOrders"
                        >上一步</el-button
                    >
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let {
    mapState: mapStateUsers,
    mapActions: mapActionsUsers,
} = createNamespacedHelpers("users");
let {
    mapState: mapStateInsures,
    mapActions: mapActionsInsures,
} = createNamespacedHelpers("insures");
let { mapActions, mapState } = createNamespacedHelpers("orders");
export default {
    data() {
        return {
            allorders: {
                _id: "",
                time: "",
                state: "",
                insuresId: "",
                usersId: "",
            },
            isShowA: true,
            isShowB: false,
            isShowC: false,
        };
    },
    mounted() {
        this.getsOrders();
        this.getUsers();
        this.getInsuresInfo();
    },
    computed: {
        ...mapState(["ordersAdmData"]),
        ...mapStateUsers(["usersData"]),
        ...mapStateInsures(["insuresInfo"]),
    },
    methods: {
        openA() {
            this.$message({
                showClose: true,
                message: "修改成功",
                type: "success",
                center: true,
            });
        },
        openB() {
            this.$message.error("修改失败");
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        ...mapActions(["getsOrders", "confirmAlterOrders", "deleteOrders"]),
        ...mapActionsUsers(["getUsers"]),
        ...mapActionsInsures(["getInsuresInfo"]),
        //   修改订单按钮
        modifyOrdersBtn(val) {
            this.isShowA = !this.isShowA;
            this.isShowB = !this.isShowB;
            this.allorders = val;
        },
        //确认修改
        async alterOrders(allorders) {
            let data = await this.confirmAlterOrders(allorders);
            if (data.code) {
                this.openA();
                this.getsOrders();
                this.isShowA = !this.isShowA;
                this.isShowB = !this.isShowB;
            } else {
                this.openB();
            }
            console.log(data);
        },
        // 修改上一步
        lastStepOrders() {
            this.isShowA = !this.isShowA;
            this.isShowB = !this.isShowB;
        },
        //查看详情
        ordersDetailsBtn(val) {
            this.isShowA = !this.isShowA;
            this.isShowC = !this.isShowC;
            this.allorders = val;
        },
        // 详情上一步
        lastDetailsOrders() {
            this.isShowA = !this.isShowA;
            this.isShowC = !this.isShowC;
        },
        // 退保
        async deleteOrdersBtn(_id) {
            let data = await this.deleteOrders(_id);
            if (data.code) {
                this.$message({
                    showClose: true,
                    message: "退保成功",
                    type: "success",
                });
                this.getsOrders();
            } else {
                this.$message({
                    showClose: true,
                    message: "退保失败",
                    type: "error",
                });
            }
        },
    },
};
</script>

<style lang='scss'>
.titel {
    line-height: 40px;
    background: rgba(185, 169, 169, 0.911);
    h1 {
        margin-left: 20px;
        color: rgb(255, 255, 255);
    }
}
.msg {
    background: white;
    // height: 500px;
    margin-top: 30px;
    padding: 20px 20px 20px 20px;
}
.add {
    background: white;
    margin-top: 30px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-form {
        width: 350px;
        text-align: center;
    }
}
</style>